<template>
  <div class="pageContainer">
    <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 47px;">
      <h3>账号管理</h3>
      <div class="titleBasicButton" @click="handleShowCreate">
        <img src="@/assets/svg/add-white.svg"  alt="">
        <div>新建</div>
      </div>
    </div>
    <div>
      <el-table fit  :data="tableData">
        <el-table-column label="登录账号" prop="username"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="联系电话" prop="phone"></el-table-column>
        <el-table-column label="模块权限" >
          <template slot-scope="{row}">
            <div style="display: flex;flex-wrap: wrap;align-items: center;">
              <div v-for="item in row.permission">{{authMap[item]}};</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop=" " width="240px">
          <template slot-scope="{row}">
            <div style="display: flex;align-items: center">
              <el-popconfirm title="确定重置密码吗?" @onConfirm="handleReset(row)">
                <el-button type="text" slot="reference" class="basicColorStyle">重置密码</el-button>
              </el-popconfirm>
              <el-divider direction="vertical"></el-divider>
              <el-button type="text" class="basicColorStyle" @click="handleShowEdit(row)">修改</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-popconfirm v-if="row.status === 0" title="确定冻结该账户吗？" @onConfirm="handleSetStatus(row, 1)">
                <el-button type="text" slot="reference" class="warningColor">冻结</el-button>
              </el-popconfirm>
              <el-popconfirm v-else title="确定恢复该账户吗？" @onConfirm="handleSetStatus(row,0)">
                <el-button type="text" slot="reference" class="defaultTextColor">恢复</el-button>
              </el-popconfirm>
              <el-divider direction="vertical"></el-divider>
              <el-popconfirm title="确定删除该账户吗？" @onConfirm="handleDelete(row)">
                <el-button type="text" slot="reference" class="warningColor">删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top:40px;">
      <el-pagination
          style="text-align: right; margin-top:20px;"
          @current-change="handleSizeChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"></el-pagination>
    </div>
    <Edit v-if="showEditModal" :info="accountInfo" @close="handleClose"></Edit>
  </div>
</template>
<script>
import {delAccount, getAccountList, resetAccount, setAccountStatus} from "@/api/account";
import Edit from "./template/Edit.vue";
export default {
  components: {
    Edit
  },
  name:"Account",
  data() {
    return {
      authMap: {
        'Order': '服务列表',
        'NewOrder': '新建服务',
        'Tag': '标签库',
        'Channel': '渠道库',
        'Human': '人力库',
        'User': '用户库'
      },
      showEditModal: false,
      accountInfo: null,
      pageSize: 10,
      tableData: [],
      pageNo: 1,
      param: {},
      total: 0
    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    handleClose() {
      this.showEditModal = false
      this.getTableList()
    },
    handleSizeChange(e) {
      this.pageNo = e
      this.getTableList()
    },
    handleSetStatus(e, status) {
      setAccountStatus({id: e.id, kind: status}).then(res => {
        if (res) {
          this.$message.success('操作成功！')
          this.getTableList()
        }
      })
    },
    handleShowEdit(e) {
      this.accountInfo = e
      this.showEditModal = true
    },
    handleReset(e) {
      resetAccount({id:e.id}).then(res => {
        if (res) {
          this.$message.success('操作成功！')
          this.getTableList()
        }
      })
    },
    handleShowCreate() {
      this.showEditModal = true
      this.accountInfo = null
    },
    handleDelete(e) {
      delAccount({id: e.id}).then(res => {
        if (res) {
          this.$message.success('操作成功！')
          this.getTableList()
        }
      })
    },
    getTableList() {
      const requestParam = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        param: {}
      }
      getAccountList(requestParam).then(res => {
        if (res) {
          this.total = res.count;
          this.tableData = res.list
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.pageContainer {
  padding: 39px 32px;
}
</style>
